<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用的选择器</title>
    <style type="text/css">

/*        <!--    id选择器：-->*/
/*<!--        通过元素的id 属性值选中唯一的一个元素-->*/
/*<!--        语法：-->*/
/*<!--            #id名{}-->*/
    #qq {
        font-size: 40px;
    }

    /*类选择器*/
    /*    通过元素的class属性选中一组元素*/
    /*    语法：*/
    /*        .class名{}*/
    .ww{
        font-size: 30px;
        color: red;
    }

    /*选择器分组*/
    /*    通过选择器分组可以选中多个选择器对应的元素*/
    /*    语法：*/
    /*        选择器1，选择器2，选择器3，选择器N{}*/
    #qq,.ww,h1{
        background: #0097e1;
    }

    /*通配选择器*/
    /*    它可以用来选择页面中的所有元素*/
    /*    语法：*/
    /*        *{}*/
    *{
        color: red;
    }

    /*为class 是 ee 的 span 的元素设置一个背景颜色为黄色*/
    /*这里用到的是复合选择器（交集选择器）*/
    /*    作用：*/
    /*        可以选中同时满足多个选择器的元素*/
    /*    语法：*/
    /*        选择器1选择器2选择器n{}*/
    span.ee{
        background: yellow;
    }

    </style>
</head>
<body>
<h1>古诗</h1>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<p id="qq">锄禾日当午</p>
<!--我们可以为元素设置class 属性，class 属性和id 属性类似，只不过class 属性可以重复、-->
<!--拥有相同class属性的元素，我们说他是一组元素-->
<!--可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开-->
<p class="ww">锄禾日当午</p>
<p class="ww">锄禾日当午</p>
<p class="ww">锄禾日当午</p>
<p class="ee">锄禾日当午</p>
<span class="ee">锄禾日当午</span>

</body>
</html>